<template>
  <div>
    <header>
      <router-link to="/"><i class="icon-back iconfont"></i></router-link>
      {{show===1 ? $t('header.login') : (show===2 ? $t('login.phone_verify') : $t('login.google_code'))}}
    </header>
    <section v-if="show===1">
      <div class="row">
        <input type="text" autocomplete="off" :placeholder="$t('login.email_input')" id="email" v-model="email" v-focus>
        <div class="err" v-if="emailErr"><p>{{emailErrText}}</p></div>
      </div>
      <div class="row">
        <input type="password" style="display:none;width:0;height:0;">
        <input type="password" autocomplete="new-password" :placeholder="$t('login.pwd_input')" id="pwd" v-model="password" @keyup.enter="login">
        <div class="err" v-if="passwordErr"><p>{{passwordErrText}}</p></div>
      </div>
      <div class="row">
        <button @click="login">{{$t('btn.confirm')}}</button>
      </div>
      <div class="row">
        <router-link to="/register">{{$t('login.no_user')}}</router-link>
        &emsp;|&emsp;
        <router-link to="/forgetpwd">{{$t('login.forget_pwd')}}</router-link>
      </div>
    </section>
    <section v-if="show===2">
      <div class="row">
        <input type="text" id="tel" v-model="telStar" class="tel" readonly>
      </div>
      <div class="row">
        <input type="text" autocomplete="off" :placeholder="$t('login.phone_code_input')" id="code" class="small" v-model="code" maxlength="6" @keyup.enter="verify" v-focus>
        <button class="small fr" @click="sendCode" :disabled="time!==60">{{time===60 ? $t('login.send_code') : `${time}s`}}</button>
        <div class="err" v-if="codeErr"><p>{{codeErrText}}</p></div>
      </div>
      <div class="row">
        <button @click="verify">{{$t('btn.confirm')}}</button>
      </div>
      <div class="row" v-show="google_verify">
        <p @click="show=3">{{$t('login.switch_google')}}</p>
      </div>
    </section>
    <section v-else-if="show===3">
      <div class="row">
        <input type="text" autocomplete="off" :placeholder="$t('login.google_code_input')" id="gcode" v-model="gcode" maxlength="6" @keyup.enter="verify" v-focus>
        <div class="err" v-if="gcodeErr"><p>{{gcodeErrText}}</p></div>
      </div>
      <div class="row google-verify-lost-prompt" @click="googleVerifyLostPrompt">{{$t('login.google_code_lose')}}</div>
      <div class="row">
        <button @click="verify">{{$t('btn.confirm')}}</button>
      </div>
      <div class="row" v-show="phone_verify">
        <p @click="show=2">{{$t('login.switch_phone')}}</p>
      </div>
    </section>
  </div>
</template>
<script>
import { login } from '@/mixins';

export default {
  mixins: [login],
  mounted() {
    window.document.querySelector('#app').style.minWidth = 'auto';
  },
  destroyed() {
    window.document.querySelector('#app').style.minWidth = '1200px';
  },
};
</script>
<style lang="scss" scoped>
header{
  height: 1.333333rem;
  line-height: 1.333333rem;
  background-color: #fff;
  box-shadow: 0px 0px .066667rem 0px rgba(0, 0, 0, 0.05);
  border-bottom: solid 1px #e0e0e0;
  color: #76c1b3;
  font-size: 18px;
  position: relative;
  text-align: center;
  a{
    position: absolute;
    left: .4rem;
    color: #76c1b3;
    font-size: 24px;
  }
}
section{
  width: 9.2rem;
  height: 10rem;
  margin: .4rem auto;
  background-color: #ffffff;
  box-shadow: 0px 0px .066667rem 0px rgba(0, 0, 0, 0.05);
  border-radius: .066667rem;
  border: solid 1px #e0e0e0;
  padding: .8rem .666667rem;
  >div{
    margin: 0 auto;
    width: 100%;
    &.row{
      height: 1.253333rem;
      margin-bottom: 24px;
      position: relative;
      input{
        width: 100%;
        height: 100%;
        background-color: #ffffff;
        border: none;
        border-radius: 0;
        border-bottom: solid 1px #cccccc;
        outline: none;
        font-size: 15px;
        &.tel{
          border: none;
        }
        &.small{
          width: 3.8rem;
        }
      }
      .err{
        position: absolute;
        left: 0;
        top: 1.253333rem;
        color: #eb547c;
        font-size: 12px;
        line-height: 18px;
      }
      button{
        width: 100%;
        height: 100%;
        background-color: #76c1b3;
        border-radius: .066667rem;
        border: none;
        outline: none;
        font-size: 18px;
        color: #fff;
        padding: 0;
        &.small{
          width: 3.8rem;
          font-size: 15px;
        }
        &:hover,&:focus{
          background-color: #8dcdc2;
        }
        &:disabled{
          background-color: #ccc;
          cursor: not-allowed;
        }
      }
      &.google-verify-lost-prompt{
        color: #247ba0;
        text-align: right;
        cursor: pointer;
      }
      &:nth-last-of-type(2){
        margin-top: 1.333333rem;
      }
      &:last-of-type{
        font-size: 12px;
        text-align: center;
        color: #247ba0;
        a{
          color: #247ba0;
        }
      }
    }
  }
}
</style>
